<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/promotion.css">
    <script src="./javascripts/libs/jquery.min.js"></script>
    <script src="./javascripts/libs/jquery.lazyload.min.js"></script>

</head>

<body>
    <script>
        $(function () {
            $("img").lazyload({
                effect: "fadeIn"
            });
        });
    </script>
    <!-- 京东活动页 -->
    <div class="header">
        <div class="safe">

        </div>
    </div>
    <div class="jd">
        <div class="logo">
            <img src="//misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png" alt="">
            <div class="search">
                <input type="text"><span>搜索</span>
            </div>
        </div>
    </div>
    <div class="nav">


    </div>

    <div class="banner">
        <img src="//m.360buyimg.com/babel/jfs/t1/102088/29/9042/294912/5e0ab2d3E4195aacc/019d274f88dd75e4.jpg.webp"
            alt="">
    </div>

    <div class="yhq">
        <ul>
            <li class="shengquan">
                <img src="https://m.360buyimg.com/babel/s990x126_jfs/t1/97172/39/9042/22506/5e0aa847E1ceaa590/21564b7ae63184af.png"
                    alt="">
                <a href=""></a>
            </li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/103367/35/8954/7408/5e08925aE404125d6/5063c1ab35c94060.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/92689/38/8957/3299/5e0b73c3E51bf3f5d/2434e47354d92b20.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
            <li><img src="https://m.360buyimg.com/babel/s194x102_jfs/t1/105500/22/8887/7583/5e09616bEb79e9a5c/a6bf4e0bdce63935.png"
                    alt=""></li>
        </ul>

    </div>

    <div class="ms floor">
        <div class="biaoti">
            <img src="//m.360buyimg.com/babel/jfs/t1/93180/32/8593/8705/5e049aceE380522f1/b48a29d3777472dc.png" alt="">
        </div>
        <div class="main">
            <ul>
                <li>
                    <h3>
                        1月03号
                    </h3>
                    <p>
                        08:00
                    </p>
                </li>
                <li>
                    <h3>
                        1月03号
                    </h3>
                    <p>
                        10:00
                    </p>
                </li>
            </ul>

            <div class="zhuangtai">
            </div>

            <ol class="content1 active">
            </ol>

            <ol class="content2">
            </ol>



        </div>

        <script>
            var goods_list = null

            function diaoyong(num, ele, count) {
                $.ajax({
                    url: '/pxx',
                    type: 'get',
                    async: false,
                    data: {
                        pdduid: 4874450680399,
                        tab_id: 6074,
                        list_id: 'uoH1Nkiy4u_RecommendGoods_6074',
                        page: num,
                        size: count,
                        content_type: 1,
                        anti_content: '0aoAfauUujtYY9EVINlY2vdds2eEvA4ZlqZD5Gpeftf_bvkxyD8yLzFNd04Kf - YHWFIUOKHLr95Lrg0QW94Q2AhoPHT5LY4aqREA50qoXXL8q0qyC99WEuLk0sdJGKmifGUBrUyxdi_jbGWf2rSmlltb2gSksLtGe34VJEG2kJutJ0AtF9Gd9Ydj6SMymOFNvUlzvy_iVAKyKWvv3M1xi16hX58J4lk2lR6eeUvN8dNpIYogOSKpYEpJmN_De5BAhB1m6 - zrvagjIZXSJucbhOcd0pP8vogPMmqQVtcZnoZkp0GOOZ_p8CHB - 6 ZZi1H0WYBow577dfO - a1g - KwwJ5LDW8qxb4C1AcDeHfqLloaogdv52w_ - o6 - 9 jxCdOoCjBDBPpw - jZzQpLpr033DFdXAgsppjsGC9m9WsUzI7tWkSsv0pJfks6_HP1lXEOHXbNZqZoqUY6uelfwemECvvdRM06i9ytUviU4L4tlP3yD43Yemh_cAsAOVv4uDo5Z1seA3SFzvc1HYHZYwWA6OV1vQ0yCaG8u5Iu9RjONTSM9VyvooM3kDkBcuKG6pDYD2 - l4DvBslWrJ0MJuNpHPvlZJy2bIlg0MZ_OkHSr8M_mcAZzpShY - EhfJl_esvDpf1ApXRtWiF1X2YN6u2cF7puoNyVhNlOA6iRxqS5nqyaxK52lH10 - LN3FL7GuhRI6t3ZD6DeeGeKd - oaD0ClI4gizjjsQ7aX00xuOwDqb1QuENkj - 3n BJxWxRGR_',
                    },
                    dataType: 'json',
                    success: function (res) {
                        goods_list = res.goods_list
                        var html = ''
                        for (var i = 0; i < goods_list.length; i++) {
                            html += `<li goods-index =${i}>
                                    <a href="">
                                        <img data-original="${goods_list[i].hd_thumb_url}"
                                            alt="">
                                    </a>
                                    <h5>${goods_list[i].goods_name}</h5>
                                    <p>
                                        <span>¥</span>
                                        <b>${(goods_list[i].normal_price/100).toFixed(2)}</b>
                                    </p>
                                </li>`
                        }
                        $(ele).html(html);
                    }
                })
            }
            diaoyong(3, '.main .content1', 5)
            diaoyong(7, '.main .content2', 5)
        </script>

        <!-- tab切换 -->
        <script>
            var btns = document.querySelectorAll('.main ul li')
            var tabs = document.querySelectorAll('.main ol')

            for (var i = 0; i < btns.length; i++) {
                btns[i].onmouseenter = function (index) {
                    for (let i = 0; i < btns.length; i++) {
                        btns[i].className = ''
                        tabs[i].className = ''
                    }
                    this.className += ' active'
                    tabs[index].className += ' active'
                }.bind(btns[i], i)
            }
        </script>

        <div class="guonian floor">
            <img src="//m.360buyimg.com/babel/jfs/t1/106290/36/8440/8355/5e057106Ee501cf9a/1cd9ac227d24194b.png" alt="">
            <ul>

            </ul>
        </div>
        <script>
            function dy(num, ele, count) {
                $.ajax({
                    url: '/pxx',
                    type: 'get',
                    async: false,
                    data: {
                        pdduid: 4874450680399,
                        tab_id: 6074,
                        list_id: 'uoH1Nkiy4u_RecommendGoods_6074',
                        page: num,
                        size: count,
                        content_type: 1,
                        anti_content: '0aoAfauUujtYY9EVINlY2vdds2eEvA4ZlqZD5Gpeftf_bvkxyD8yLzFNd04Kf - YHWFIUOKHLr95Lrg0QW94Q2AhoPHT5LY4aqREA50qoXXL8q0qyC99WEuLk0sdJGKmifGUBrUyxdi_jbGWf2rSmlltb2gSksLtGe34VJEG2kJutJ0AtF9Gd9Ydj6SMymOFNvUlzvy_iVAKyKWvv3M1xi16hX58J4lk2lR6eeUvN8dNpIYogOSKpYEpJmN_De5BAhB1m6 - zrvagjIZXSJucbhOcd0pP8vogPMmqQVtcZnoZkp0GOOZ_p8CHB - 6 ZZi1H0WYBow577dfO - a1g - KwwJ5LDW8qxb4C1AcDeHfqLloaogdv52w_ - o6 - 9 jxCdOoCjBDBPpw - jZzQpLpr033DFdXAgsppjsGC9m9WsUzI7tWkSsv0pJfks6_HP1lXEOHXbNZqZoqUY6uelfwemECvvdRM06i9ytUviU4L4tlP3yD43Yemh_cAsAOVv4uDo5Z1seA3SFzvc1HYHZYwWA6OV1vQ0yCaG8u5Iu9RjONTSM9VyvooM3kDkBcuKG6pDYD2 - l4DvBslWrJ0MJuNpHPvlZJy2bIlg0MZ_OkHSr8M_mcAZzpShY - EhfJl_esvDpf1ApXRtWiF1X2YN6u2cF7puoNyVhNlOA6iRxqS5nqyaxK52lH10 - LN3FL7GuhRI6t3ZD6DeeGeKd - oaD0ClI4gizjjsQ7aX00xuOwDqb1QuENkj - 3n BJxWxRGR_',
                    },
                    dataType: 'json',
                    success: function (res) {
                        goods_list = res.goods_list
                        var html = ''
                        for (var i = 0; i < goods_list.length; i++) {
                            html += `<li goods-index =${i}>
                                    <a href="">
                                        <img data-original="${goods_list[i].hd_thumb_url}"
                                            alt="">
                                    </a>
                              
                                </li>`
                        }
                        $(ele).html(html);
                    }
                })
            }
            dy(5, '.guonian ul', 5)
        </script>

        <div class="jinri floor">
            <img src="//m.360buyimg.com/babel/jfs/t1/87170/6/8492/7754/5e057186Edaf89a91/06fcf411570f801f.png" alt="">

        </div>

        <div class="jujia">
            <img src="//m.360buyimg.com/babel/jfs/t1/86063/40/9018/7560/5e0ac6f0E909bc1ff/5296d5579b2c3b02.png" alt="">
            <img src="//m.360buyimg.com/babel/jfs/t1/99476/22/9001/37682/5e0b5422Eb1e111e9/3dd2b7facabea972.png" alt="">
            <ul>
                <!-- <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ul>
        </div>
        <script>
            dy(6, '.jujia ul', 8)
        </script>

        <div class="meizhuang">

            <img src="//m.360buyimg.com/babel/jfs/t1/109935/11/2834/7715/5e0ac884E0393de67/0b51b53106f3fc53.png" alt="">


            <ul>
                <!-- <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ul>
        </div>

        <script>
            dy(6, '.meizhuang ul', 6)
        </script>
        <div class="tuijian floor">
            <img src="//m.360buyimg.com/babel/jfs/t1/108731/2/2282/7855/5e0572e0E499f9e8e/d1564bb225b4f575.png" alt="">

            <ul>
            </ul>

            <ol>
            </ol>
        </div>
        <script>
            diaoyong(2, '.tuijian ul', 5)
            dy(4, '.tuijian ol', 4)
        </script>

        <div class="dapai floor">
            <img src="//m.360buyimg.com/babel/jfs/t1/88897/17/8534/8527/5e057395E2959366c/5826f33012ae1e8a.png" alt="">
            <ul>

            </ul>

        </div>
        <script>
            dy(11, '.dapai ul', 4)
        </script>


        <div class="shengyan floor">
            <img src="//m.360buyimg.com/babel/jfs/t1/96398/23/8460/7685/5e057438E10d32161/e6427b2449a1ba22.png" alt="">
            <img src="//m.360buyimg.com/babel/jfs/t1/99975/7/9012/33538/5e0ac06aEfc7db22a/640a67cd61fbd168.png" alt="">
            <ul>

            </ul>
        </div>
        <script>
            dy(12, '.shengyan ul', 10)
        </script>
        <div class="tese floor">
            <img src="//m.360buyimg.com/babel/jfs/t1/103485/26/8563/7723/5e0574d5Ef6caaf75/cd13e1a52027e478.png" alt="">
            <ul>

            </ul>

        </div>
        <script>
            dy(15, '.tese ul', 5)
        </script>


        <div class="gengduo floor">
            <img src="//m.360buyimg.com/babel/jfs/t1/100900/9/8468/7818/5e05752eE5b4ab35e/89db6f96f011ef03.png" alt="">
            <ul>

            </ul>
        </div>
        <script>
            diaoyong(12, '.gengduo ul', 15)
        </script>


        <div class="floor-bar">
            <ul>
                <li>
                    年货限时秒
                </li>
                <li>
                    过年买好物
                </li>
                <li>
                    今日必看
                </li>
                <li>
                    为你推荐
                </li>
                <li>
                    年货大牌
                </li>
                <li>
                    全品盛惠
                </li>
                <li>
                    特色会场
                </li>
                <li>更多年货</li>
                <li>回到顶部</li>

            </ul>



        </div>


        <script>
            class Stairs {
                constructor() {
                    this.init()
                    this.bindEvent()
                }

                init() {
                    this.$floor_bar = $('.floor-bar')
                    this.$btn = this.$floor_bar.find('li')
                    this.$floor_top = []
                    this.$floors = $('.floor')
                    for (var i = 0; i < this.$floors.length; i++) {
                        this.$floor_top.push(this.$floors.eq(i).offset().top)
                    }
                }
                bindEvent() {
                    $(window).scroll(function () {
                        var st = $('html, body').scrollTop()
                        if (st >= 650) {
                            this.toggle('show')
                        } else {
                            this.toggle('hide')
                        }
                        this.changeFloorBtn(st)

                    }.bind(this))

                    this.$btn.click(function (evt) {

                        var e = evt || window.event
                        var target = e.target || e.srcElement

                        this.changeFloor($(target).index())

                    }.bind(this))

                }
                toggle(type) {
                    switch (type) {
                        case 'show':
                            this.$floor_bar.fadeIn(1000)
                            break;
                        case 'hide':
                            this.$floor_bar.hide()
                            break
                    }
                }

                changeFloorBtn(st) {
                    this.$floor_top.some(function (item, index, arr) {
                        if (index === this.$floor_top.length - 1 && st > item) {

                            this.$btn.eq(index).addClass('active')
                                .siblings('.active').removeClass('active')
                            return true
                        }

                        if (st >= item && st < arr[index + 1]) {
                            this.$btn.eq(index).addClass('active')
                                .siblings('.active').removeClass('active')
                            return true
                        }

                    }.bind(this))
                }
                changeFloor(index) {
                    $('html,body').scrollTop(this.$floor_top[index] + 1)
                }
            }
            new Stairs()
        </script>











</body>

</html>